<template>
  <div class="min-h-screen bg-gradient-to-br from-gray-50 via-blue-50 to-indigo-100">

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 py-8">

      <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 ">

        <!-- 左侧区域 (25%) -->
        <div class="lg:col-span-3 space-y-6 sticky lg:top-36 self-start max-h-[calc(100vh-5rem)] overflow-y-auto">
          <!-- 广告轮播 -->
          <AdCarousel />
          <!-- 推荐好友 -->
          <SuggestUserList />
        </div>

        <!-- 中间区域 (50%) -->
        <div class="lg:col-span-6 space-y-6">
          <!-- 帖子列表 -->
          <PostList pageType="concern" />
        </div>

        <!-- 右侧区域 (25%) -->
        <div class="lg:col-span-3 space-y-6 sticky lg:top-36 self-start max-h-[calc(100vh-5rem)] overflow-y-auto">
          <!-- 关注用户列表 -->
          <FollowingUsers />
        </div>

      </div>
    </main>

  </div>
</template>


<script>
import AdCarousel from "@/components/AdCarousel.vue";
import FollowingUsers from "@/components/FollowingUsers.vue";
import SuggestUserList from "@/components/SuggestUserList.vue";
import PostList from "@/components/PostList.vue";

export default {
  name: "Concern",
  components: {
    AdCarousel,
    FollowingUsers,
    SuggestUserList,
    PostList
  }
};
</script>

<style scoped>
/* 卡片悬停效果 */
div[class*="space-y-6"] > div {
  transition: all 0.3s ease;
}

div[class*="space-y-6"] > div:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(127, 234, 169, 0.1), 0 10px 10px -5px rgba(127, 234, 169, 0.04);
}

/* 图片悬停效果 */
.grid > div {
  transition: all 0.2s ease;
}

/* 按钮悬停效果 */
button:not([disabled]):hover {
  transform: scale(1.02);
}

/* 点赞按钮动画 */
button:hover i {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

img {
  pointer-events: auto;
  touch-action: pan-y;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 2px;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}


</style>